<template>
  <div class="head">
    <div class="headBack" :style="{ top: navTop,backgroundColor: navColor }">
      <div class="container" style="max-width: 80%">
        <!-- pc端导航 -->
        <div style="float: left;position:absolute;top: 13px"><a href="#/Home" class="size-name">Zlwblog</a></div>
        <el-menu :style="{backgroundColor: navColor}" :default-active="activeIndex" class="el-menu-demo"
                 mode="horizontal" @select="handleSelect"
                 :router="true">
          <el-menu-item @click="handleSearch"><i class="fa">
            <svg t="1688267245288" style="width: 18px;height: 22px" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="2285" width="200" height="200">
              <path
                d="M955.069071 864.311021 740.015134 649.258107c-3.752464-3.751441-8.841366-5.860475-14.149255-5.860475-5.306866 0-10.395768 2.108011-14.149255 5.860475l-16.692171 16.692171-38.34226-38.34226c53.03796-59.810201 85.298711-138.442072 85.298711-224.478588 0-186.774871-151.952784-338.727655-338.727655-338.727655S64.527642 216.35456 64.527642 403.12943c0 186.775894 151.952784 338.728678 338.727655 338.728678 86.36909 0 165.276231-32.510438 225.170343-85.913718l38.303374 38.303374-17.34504 17.34504c-7.812943 7.813966-7.812943 20.48352 0 28.297486l215.051891 215.052914c3.753487 3.751441 8.841366 5.860475 14.149255 5.860475 5.306866 0 10.395768-2.108011 14.149255-5.860475l62.334697-62.334697C962.883037 884.794541 962.883037 872.124987 955.069071 864.311021zM104.546078 403.12943c0-164.709319 133.9999-298.709219 298.709219-298.709219s298.709219 133.9999 298.709219 298.709219S567.964616 701.839673 403.255297 701.839673 104.546078 567.838749 104.546078 403.12943zM878.585119 912.496463 691.829691 725.741036l34.036187-34.036187 186.755428 186.755428L878.585119 912.496463z"
                fill="#272636" p-id="2286"></path>
            </svg>
          </i>
            搜索
          </el-menu-item>
          <el-dialog
            title="本地搜索"
            :visible.sync="openSearch"
            center>
            <div id="local-input-panel">
              <div id="local-search-input">
                <div class="local-search-box"><input v-model="keyword" @keyup="getSearchResult($event)"
                                                     class="local-search-box--input"
                                                     placeholder="搜索文章" type="text">
                </div>
              </div>
            </div>
            <hr>
            <!--      搜索结果显示      -->
            <div id="local-search-results">
              <div class="search-result-list">
                <div class="local-search__hit-item" v-for="item in searchList">
                  <a :href="'#/DetailArticle?aid='+item.id" class="search-result-title" data-pjax-state=""
                     v-html="item.title"></a>
                  <p class="search-result" v-html="item.summary"></p>
                </div>
                <p v-show="(null!=keyword && ''!=keyword) && searchList.length === 0">
                  找不到您查询的内容：{{ keyword }}</p>
              </div>
            </div>
          </el-dialog>
          <el-menu-item index="/Home"><i class="fa">
            <svg t="1685065095182" style="width: 18px;height: 22px" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="12402" width="200" height="200">
              <path
                d="M730.9568 483.6864a0.5376 0.5376 0 0 0-0.1536-0.256 92.4672 92.4672 0 0 0-17.92-20.096l-14.6176-12.3648-286.72-242.5088c-21.2992-18.048-49.5104-26.88-77.5936-26.5984l-184.8832 156.4672-14.6176 12.3904a92.4672 92.4672 0 0 0-17.92 20.096 0.5376 0.5376 0 0 0-0.1536 0.256 99.2512 99.2512 0 0 0-13.184 38.4A102.1952 102.1952 0 0 0 102.4 422.4v436.9152C102.4 911.8208 142.2592 954.88 190.9504 954.88H744.96V535.04a102.1952 102.1952 0 0 0-0.8192-12.928 99.2512 99.2512 0 0 0-13.184-38.4256z"
                fill="#EE7C3D" p-id="12403"></path>
              <path
                d="M920.7808 409.6a99.2512 99.2512 0 0 0-13.184-38.4 0.6912 0.6912 0 0 0-0.1536-0.256 92.4672 92.4672 0 0 0-17.92-20.096l-14.6176-12.3648-286.72-242.5088C567.296 78.08 539.648 69.12 512 69.12s-55.296 8.8832-76.2624 26.624l-286.72 242.5088-14.5664 12.4672a92.4672 92.4672 0 0 0-17.92 20.096 0.6912 0.6912 0 0 0-0.1536 0.256 99.2512 99.2512 0 0 0-13.184 38.4A102.1952 102.1952 0 0 0 102.4 422.4v436.9152C102.4 911.8208 142.2592 954.88 190.9504 954.88h642.0992c48.64 0 88.5504-42.9824 88.5504-95.488V422.4a102.1952 102.1952 0 0 0-0.8192-12.8zM440.32 872.96V595.0464h145.92V872.96z m399.36-13.568c0 9.0368-5.4528 13.3376-6.6304 13.568H668.16V589.9264a77.0304 77.0304 0 0 0-76.8-76.8h-156.16a77.0304 77.0304 0 0 0-76.8 76.8V872.96H190.9504c-1.1776-0.2304-6.6304-4.5312-6.6304-13.568V422.4a18.2528 18.2528 0 0 1 0.1792-2.56 17.92 17.92 0 0 1 1.4336-5.12 10.8288 10.8288 0 0 1 1.3312-1.28l14.592-12.3648 286.72-242.5088a41.2928 41.2928 0 0 1 46.72 0l286.72 242.5088 14.592 12.3648h0.128a13.1328 13.1328 0 0 1 1.3312 1.28 18.2272 18.2272 0 0 1 1.4336 5.12 20.1216 20.1216 0 0 1 0.1792 2.56z"
                fill="#333333" p-id="12404"></path>
            </svg>
          </i>
            首页
          </el-menu-item>
          <el-submenu index="/Share">
            <template slot="title"><i class="fa"></i>
              <svg style="width: 18px;height: 22px" t="1685065580588" class="icon" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14321" width="200" height="200">
                <path
                  d="M585.1648 905.1648c-19.8144 0-35.84-16.0256-35.84-35.84v-283.392c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v283.392c0 19.7632-16.0768 35.84-35.84 35.84zM728.9344 905.1648c-19.8144 0-35.84-16.0256-35.84-35.84v-283.392c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v283.392c0 19.7632-16.0768 35.84-35.84 35.84zM875.7248 905.1648c-19.8144 0-35.84-16.0256-35.84-35.84v-283.392c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v283.392c0 19.7632-16.0768 35.84-35.84 35.84z"
                  fill="#FEC963" p-id="14322"></path>
                <path
                  d="M234.4448 481.1776h174.7456c35.328 0 64-28.672 64-64v-175.104c0-35.328-28.672-64-64-64H221.5424c-28.2112 0-51.0976 22.8864-51.0976 51.0976v188.0576c0.0512 35.328 28.672 63.9488 64 63.9488zM860.16 178.0736h-187.648c-28.2112 0-51.0976 22.8864-51.0976 51.0976v188.0576c0 35.328 28.672 64 64 64H860.16c35.328 0 64-28.672 64-64v-175.104c0-35.3792-28.672-64.0512-64-64.0512zM410.9824 619.1104H223.3344c-28.2112 0-51.0976 22.8864-51.0976 51.0976v188.0576c0 35.328 28.672 64 64 64h174.7456c35.328 0 64-28.672 64-64v-175.104c0-35.4304-28.672-64.0512-64-64.0512z"
                  fill="#9bc6fc" p-id="14323"></path>
                <path
                  d="M390.3488 105.0624h-224.768c-38.8096 0-70.4 31.5904-70.4 70.4v224.768c0 38.8096 31.5904 70.4 70.4 70.4h224.768c38.8096 0 70.4-31.5904 70.4-70.4v-224.768c0.0512-38.8608-31.5392-70.4-70.4-70.4zM414.72 400.2304c0 13.4144-10.9056 24.32-24.32 24.32h-224.768c-13.4144 0-24.32-10.9056-24.32-24.32v-224.768c0-13.4144 10.9056-24.32 24.32-24.32h224.768c13.4144 0 24.32 10.9056 24.32 24.32v224.768zM390.3488 546.6112h-224.768c-38.8096 0-70.4 31.5904-70.4 70.4v224.768c0 38.8096 31.5904 70.4 70.4 70.4h224.768c38.8096 0 70.4-31.5904 70.4-70.4v-224.768c0.0512-38.8096-31.5392-70.4-70.4-70.4zM414.72 841.7792c0 13.4144-10.9056 24.32-24.32 24.32h-224.768c-13.4144 0-24.32-10.9056-24.32-24.32v-224.768c0-13.4144 10.9056-24.32 24.32-24.32h224.768c13.4144 0 24.32 10.9056 24.32 24.32v224.768zM841.6256 105.0624h-224.768c-38.8096 0-70.4 31.5904-70.4 70.4v224.768c0 38.8096 31.5904 70.4 70.4 70.4h224.768c38.8096 0 70.4-31.5904 70.4-70.4v-224.768c0-38.8608-31.5904-70.4-70.4-70.4z m24.32 295.168c0 13.4144-10.9056 24.32-24.32 24.32h-224.768c-13.4144 0-24.32-10.9056-24.32-24.32v-224.768c0-13.4144 10.9056-24.32 24.32-24.32h224.768c13.4144 0 24.32 10.9056 24.32 24.32v224.768zM571.4944 545.5872a23.04 23.04 0 0 0-23.04 23.04v317.3888c0 12.7488 10.2912 23.04 23.04 23.04s23.04-10.2912 23.04-23.04v-317.3888c0-12.7488-10.2912-23.04-23.04-23.04zM719.0528 545.5872a23.04 23.04 0 0 0-23.04 23.04v317.3888c0 12.7488 10.2912 23.04 23.04 23.04s23.04-10.2912 23.04-23.04v-317.3888a23.04 23.04 0 0 0-23.04-23.04zM866.56 545.5872a23.04 23.04 0 0 0-23.04 23.04v317.3888c0 12.7488 10.2912 23.04 23.04 23.04s23.04-10.2912 23.04-23.04v-317.3888c0-12.7488-10.2912-23.04-23.04-23.04z"
                  fill="#474747" p-id="14324"></path>
              </svg>
              分类
            </template>
            <el-menu-item v-for="(item,index) in classListObj" :key="'class1'+index"
                          :index="'/Share?classId='+item.id">{{ item.name }}
            </el-menu-item>
          </el-submenu>
          <!--                        <el-menu-item index="/Reward"><i class="fa fa-wa fa-cny"></i> 赞赏</el-menu-item>-->
          <el-menu-item index="/MessageBoard"><i class="fa">
            <svg style="width: 18px;height: 22px" t="1688096797771" class="icon" viewBox="0 0 1142 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="1722" width="200" height="200">
              <path d="M0 0zM0 0h14.711266v926.887802H0z" fill="#2DD874" p-id="1723"></path>
              <path d="M14.711266 0h14.711265v926.887802H14.711266z" fill="#2CD773" p-id="1724"></path>
              <path d="M29.422531 0h14.711266v926.887802H29.422531z" fill="#2CD672" p-id="1725"></path>
              <path d="M44.133797 0h14.711265v926.887802H44.133797z" fill="#2BD572" p-id="1726"></path>
              <path d="M58.845062 0h14.711266v926.887802H58.845062z" fill="#2AD471" p-id="1727"></path>
              <path d="M73.567481 0h14.711266v926.887802H73.567481z" fill="#29D370" p-id="1728"></path>
              <path d="M88.278747 0h14.711265v926.887802H88.278747z" fill="#29D26F" p-id="1729"></path>
              <path d="M102.990012 0h14.711266v926.887802H102.990012z" fill="#28D16F" p-id="1730"></path>
              <path d="M117.701278 0h14.711265v926.887802h-14.711265z" fill="#27D06E" p-id="1731"></path>
              <path d="M132.412543 0h14.711266v926.887802h-14.711266z" fill="#26CF6D" p-id="1732"></path>
              <path d="M147.123809 0h14.711265v926.887802h-14.711265z" fill="#26CE6C" p-id="1733"></path>
              <path d="M161.835074 0h14.711266v926.887802H161.835074z" fill="#25CD6B" p-id="1734"></path>
              <path d="M176.54634 0h14.711265v926.887802h-14.711265z" fill="#24CC6B" p-id="1735"></path>
              <path d="M191.257605 0h14.711266v926.887802h-14.711266z" fill="#24CB6A" p-id="1736"></path>
              <path d="M205.980024 0h14.711266v926.887802h-14.711266z" fill="#23CA69" p-id="1737"></path>
              <path d="M220.69129 0h14.711265v926.887802h-14.711265z" fill="#22C968" p-id="1738"></path>
              <path d="M235.402555 0h14.711266v926.887802h-14.711266z" fill="#21C868" p-id="1739"></path>
              <path d="M250.113821 0h14.711265v926.887802h-14.711265z" fill="#21C767" p-id="1740"></path>
              <path d="M264.825086 0h14.711266v926.887802h-14.711266z" fill="#20C666" p-id="1741"></path>
              <path d="M279.536352 0h14.711265v926.887802h-14.711265z" fill="#1FC565" p-id="1742"></path>
              <path d="M294.247617 0h14.711266v926.887802h-14.711266z" fill="#1EC465" p-id="1743"></path>
              <path d="M308.958883 0h14.711265v926.887802h-14.711265z" fill="#1EC364" p-id="1744"></path>
              <path d="M323.670148 0h14.711266v926.887802H323.670148z" fill="#1DC263" p-id="1745"></path>
              <path d="M338.381414 0h14.711266v926.887802h-14.711266z" fill="#1CC162" p-id="1746"></path>
              <path d="M353.103833 0h14.711265v926.887802h-14.711265z" fill="#1CC061" p-id="1747"></path>
              <path d="M367.815098 0h14.711266v926.887802h-14.711266z" fill="#1BBF61" p-id="1748"></path>
              <path d="M382.526364 0h14.711265v926.887802h-14.711265z" fill="#1ABE60" p-id="1749"></path>
              <path d="M397.237629 0h14.711266v926.887802h-14.711266z" fill="#19BD5F" p-id="1750"></path>
              <path d="M411.948895 0h14.711266v926.887802h-14.711266z" fill="#19BC5E" p-id="1751"></path>
              <path d="M426.660161 0h14.711265v926.887802h-14.711265z" fill="#18BB5E" p-id="1752"></path>
              <path d="M441.371426 0h14.711266v926.887802h-14.711266z" fill="#17BA5D" p-id="1753"></path>
              <path d="M456.082692 0h14.711265v926.887802h-14.711265z" fill="#17B95C" p-id="1754"></path>
              <path d="M470.793957 0h14.711266v926.887802h-14.711266z" fill="#16B75B" p-id="1755"></path>
              <path d="M485.516376 0h14.711266v926.887802h-14.711266z" fill="#15B65A" p-id="1756"></path>
              <path d="M500.227642 0h14.711265v926.887802H500.227642z" fill="#14B55A" p-id="1757"></path>
              <path d="M514.938907 0h14.711266v926.887802h-14.711266z" fill="#14B459" p-id="1758"></path>
              <path d="M529.650173 0h14.711265v926.887802h-14.711265z" fill="#13B358" p-id="1759"></path>
              <path d="M544.361438 0h14.711266v926.887802h-14.711266z" fill="#12B257" p-id="1760"></path>
              <path d="M559.072704 0h14.711265v926.887802h-14.711265z" fill="#11B157" p-id="1761"></path>
              <path d="M573.783969 0h14.711266v926.887802h-14.711266z" fill="#11B056" p-id="1762"></path>
              <path d="M588.495235 0h14.711265v926.887802h-14.711265z" fill="#10AF55" p-id="1763"></path>
              <path d="M603.2065 0h14.711266v926.887802h-14.711266z" fill="#0FAE54" p-id="1764"></path>
              <path d="M617.928919 0h14.711266v926.887802h-14.711266z" fill="#0FAD53" p-id="1765"></path>
              <path d="M632.640185 0h14.711265v926.887802h-14.711265z" fill="#0EAC53" p-id="1766"></path>
              <path d="M647.35145 0h14.711266v926.887802h-14.711266z" fill="#0DAB52" p-id="1767"></path>
              <path d="M662.062716 0h14.711265v926.887802H662.062716z" fill="#0CAA51" p-id="1768"></path>
              <path d="M676.773981 0h14.711266v926.887802h-14.711266z" fill="#0CA950" p-id="1769"></path>
              <path d="M691.485247 0h14.711265v926.887802h-14.711265z" fill="#0BA850" p-id="1770"></path>
              <path d="M706.196512 0h14.711266v926.887802h-14.711266z" fill="#0AA74F" p-id="1771"></path>
              <path d="M720.907778 0h14.711265v926.887802h-14.711265z" fill="#09A64E" p-id="1772"></path>
              <path d="M735.619043 0h14.711266v926.887802h-14.711266z" fill="#09A54D" p-id="1773"></path>
              <path d="M750.330309 0h14.711266v926.887802h-14.711266z" fill="#08A44D" p-id="1774"></path>
              <path d="M765.052728 0h14.711265v926.887802h-14.711265z" fill="#07A34C" p-id="1775"></path>
              <path d="M779.763993 0h14.711266v926.887802h-14.711266z" fill="#07A24B" p-id="1776"></path>
              <path d="M794.475259 0h14.711265v926.887802h-14.711265z" fill="#06A14A" p-id="1777"></path>
              <path d="M809.186524 0h14.711266v926.887802h-14.711266z" fill="#05A049" p-id="1778"></path>
              <path d="M823.89779 0h14.711266v926.887802H823.89779z" fill="#049F49" p-id="1779"></path>
              <path d="M838.609056 0h14.711265v926.887802h-14.711265z" fill="#049E48" p-id="1780"></path>
              <path d="M853.320321 0h14.711266v926.887802h-14.711266z" fill="#039D47" p-id="1781"></path>
              <path d="M868.031587 0h14.711265v926.887802h-14.711265z" fill="#029C46" p-id="1782"></path>
              <path d="M882.742852 0h14.711266v926.887802h-14.711266z" fill="#019B46" p-id="1783"></path>
              <path d="M897.465271 0h14.711266v926.887802h-14.711266z" fill="#019A45" p-id="1784"></path>
              <path d="M912.176537 0h14.711265v926.887802h-14.711265zM926.887802 926.887802z" fill="#009944"
                    p-id="1785"></path>
              <path
                d="M192.752154 154.841925m18.971844 0l595.990285 0q18.971844 0 18.971844 18.971845l0 484.679875q0 18.971844-18.971844 18.971844l-595.990285 0q-18.971844 0-18.971844-18.971844l0-484.679875q0-18.971844 18.971844-18.971845Z"
                fill="#FFFFFF" opacity=".37" p-id="1786"></path>
              <path
                d="M100.201675 249.422313m18.971845 0l595.990284 0q18.971844 0 18.971844 18.971845l0 484.679875q0 18.971844-18.971844 18.971844l-595.990284 0q-18.971844 0-18.971845-18.971844l0-484.679875q0-18.971844 18.971845-18.971845Z"
                fill="#FFFFFF" p-id="1787"></path>
              <path
                d="M211.802072 500.829922m4.171352 0l402.390476 0q4.171352 0 4.171352 4.171352l0 38.233676q0 4.171352-4.171352 4.171352l-402.390476 0q-4.171352 0-4.171352-4.171352l0-38.233676q0-4.171352 4.171352-4.171352Z"
                fill="#4EDD92" p-id="1788"></path>
              <path
                d="M211.802072 632.104824m4.171352 0l402.390476 0q4.171352 0 4.171352 4.171352l0 38.233676q0 4.171352-4.171352 4.171352l-402.390476 0q-4.171352 0-4.171352-4.171352l0-38.233676q0-4.171352 4.171352-4.171352Z"
                fill="#4EDD92" p-id="1789"></path>
              <path
                d="M192.752154 369.566174m4.171352 0l67.879274 0q4.171352 0 4.171352 4.171352l0 38.233676q0 4.171352-4.171352 4.171352l-67.879274 0q-4.171352 0-4.171352-4.171352l0-38.233676q0-4.171352 4.171352-4.171352Z"
                fill="#4EDD92" p-id="1790"></path>
              <path
                d="M309.193103 369.566174m4.171352 0l67.879274 0q4.171352 0 4.171352 4.171352l0 38.233676q0 4.171352-4.171352 4.171352l-67.879274 0q-4.171352 0-4.171352-4.171352l0-38.233676q0-4.171352 4.171352-4.171352Z"
                fill="#4EDD92" p-id="1791"></path>
            </svg>
          </i>
            留言板
          </el-menu-item>
          <el-menu-item index="/MyChatGPT"><i class="fa">
            <svg style="width: 18px;height: 22px" t="1685065851553" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="22979" width="200" height="200">
              <path d="M196 928m-20 0a20 20 0 1 0 40 0 20 20 0 1 0-40 0Z" fill="#D4FFD4" p-id="22980"></path>
              <path d="M576 108m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#D4FFD4" p-id="22981"></path>
              <path d="M308 528m-12 0a12 12 0 1 0 24 0 12 12 0 1 0-24 0Z" fill="#D4FFD4" p-id="22982"></path>
              <path d="M576 548m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#D4FFD4" p-id="22983"></path>
              <path d="M908 920m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0Z" fill="#D4FFD4" p-id="22984"></path>
              <path d="M996 864m-20 0a20 20 0 1 0 40 0 20 20 0 1 0-40 0Z" fill="#FFBDBD" p-id="22985"></path>
              <path d="M224 124m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#FFBDBD" p-id="22986"></path>
              <path d="M748 516m-12 0a12 12 0 1 0 24 0 12 12 0 1 0-24 0Z" fill="#FFBDBD" p-id="22987"></path>
              <path d="M72 828m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#FFBDBD" p-id="22988"></path>
              <path d="M76 444m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0Z" fill="#FFBDBD" p-id="22989"></path>
              <path d="M420 96m-20 0a20 20 0 1 0 40 0 20 20 0 1 0-40 0Z" fill="#BBF1FF" p-id="22990"></path>
              <path d="M936 524m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#BBF1FF" p-id="22991"></path>
              <path d="M556 916m-12 0a12 12 0 1 0 24 0 12 12 0 1 0-24 0Z" fill="#BBF1FF" p-id="22992"></path>
              <path d="M412 508m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#BBF1FF" p-id="22993"></path>
              <path d="M852 128m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0Z" fill="#BBF1FF" p-id="22994"></path>
              <path d="M28 124m-20 0a20 20 0 1 0 40 0 20 20 0 1 0-40 0Z" fill="#FFF4C5" p-id="22995"></path>
              <path d="M96 524m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#FFF4C5" p-id="22996"></path>
              <path d="M728 96m-12 0a12 12 0 1 0 24 0 12 12 0 1 0-24 0Z" fill="#FFF4C5" p-id="22997"></path>
              <path d="M624 548m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#FFF4C5" p-id="22998"></path>
              <path d="M632 932m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0Z" fill="#FFF4C5" p-id="22999"></path>
              <path d="M230.2 310.44m-134.2 0a134.2 134.2 0 1 0 268.4 0 134.2 134.2 0 1 0-268.4 0Z" fill="#CBECF9"
                    p-id="23000"></path>
              <path d="M230.2 289.68m-113.4 0a113.4 113.4 0 1 0 226.8 0 113.4 113.4 0 1 0-226.8 0Z" fill="#FFFFFF"
                    p-id="23001"></path>
              <path
                d="M230.2 452.64A142.2 142.2 0 1 1 372.4 310.44a142.36 142.36 0 0 1-142.2 142.2z m0-268.4A126.2 126.2 0 1 0 356.4 310.44a126.32 126.32 0 0 0-126.2-126.2z"
                fill="#2FB1EA" p-id="23002"></path>
              <path d="M129.56 310.44a100.64 100.64 0 0 0 201.28 0z" fill="#FFC444" p-id="23003"></path>
              <path d="M152.76 333.64a77.44 77.44 0 0 0 154.88 0z" fill="#FFE76E" p-id="23004"></path>
              <path
                d="M230.2 419.08a108.76 108.76 0 0 1-108.64-108.64 8 8 0 0 1 8-8h201.28a8 8 0 0 1 8 8 108.76 108.76 0 0 1-108.64 108.64zM137.88 318.44a92.64 92.64 0 0 0 184.6 0z"
                fill="#2FB1EA" p-id="23005"></path>
              <path d="M793.8 713.56m-134.2 0a134.2 134.2 0 1 0 268.4 0 134.2 134.2 0 1 0-268.4 0Z" fill="#CBECF9"
                    p-id="23006"></path>
              <path d="M793.8 692.76m-113.4 0a113.4 113.4 0 1 0 226.8 0 113.4 113.4 0 1 0-226.8 0Z" fill="#FFFFFF"
                    p-id="23007"></path>
              <path
                d="M793.8 855.76A142.2 142.2 0 1 1 936 713.56a142.36 142.36 0 0 1-142.2 142.2z m0-268.4A126.2 126.2 0 1 0 920 713.56a126.32 126.32 0 0 0-126.2-126.2z"
                fill="#2FB1EA" p-id="23008"></path>
              <path d="M693.16 713.56a100.64 100.64 0 0 0 201.28 0z" fill="#FFC444" p-id="23009"></path>
              <path d="M716.36 736.76a77.44 77.44 0 0 0 154.88 0z" fill="#FFE76E" p-id="23010"></path>
              <path
                d="M793.8 822.2a108.76 108.76 0 0 1-108.64-108.64 8 8 0 0 1 8-8h201.28a8 8 0 0 1 8 8 108.76 108.76 0 0 1-108.64 108.64z m-92.32-100.64a92.64 92.64 0 0 0 184.6 0z"
                fill="#2FB1EA" p-id="23011"></path>
              <path
                d="M928 243.36v134.2a67.08 67.08 0 0 1-67.08 67.08h-301.96A67.08 67.08 0 0 1 492 377.56l-73.92-67.12L492 243.36a67.08 67.08 0 0 1 67.08-67.08h301.92A67.08 67.08 0 0 1 928 243.36z"
                fill="#CBECF9" p-id="23012"></path>
              <path
                d="M900.92 243.36v105.8a67.08 67.08 0 0 1-67.08 67.08H576a67.08 67.08 0 0 1-67.08-67.08l-90.68-38.72L492 243.36a67.08 67.08 0 0 1 67.08-67.08h274.88a67.08 67.08 0 0 1 66.96 67.08z"
                fill="#FFFFFF" p-id="23013"></path>
              <path
                d="M860.92 452.64h-301.96A75.2 75.2 0 0 1 484 381.16l-71.28-64.8a8 8 0 0 1 0-12L484 239.72a75.2 75.2 0 0 1 75-71.48h301.92A75.2 75.2 0 0 1 936 243.36v134.2a75.2 75.2 0 0 1-75.08 75.08zM429.96 310.44l67.28 61.16a8 8 0 0 1 2.6 5.92 59.16 59.16 0 0 0 59.08 59.08h301.92A59.16 59.16 0 0 0 920 377.56V243.36a59.16 59.16 0 0 0-59.08-59.08h-301.96A59.16 59.16 0 0 0 500 243.36a8 8 0 0 1-2.6 5.92z"
                fill="#2FB1EA" p-id="23014"></path>
              <path d="M545.56 243.36l315.36 0 0 40.24-315.36 0 0-40.24Z" fill="#90FC95" p-id="23015"></path>
              <path d="M545.56 337.28l315.36 0 0 40.24-315.36 0 0-40.24Z" fill="#90FC95" p-id="23016"></path>
              <path
                d="M96 646.44v134.2a67.08 67.08 0 0 0 67.08 67.08h301.92A67.08 67.08 0 0 0 532 780.64l73.8-67.08L532 646.44a67.08 67.08 0 0 0-67.08-67.08H163.08A67.08 67.08 0 0 0 96 646.44z"
                fill="#CBECF9" p-id="23017"></path>
              <path
                d="M123.08 646.44v105.8a67.08 67.08 0 0 0 67.08 67.08H448a67.08 67.08 0 0 0 67.08-67.08l90.68-38.72L532 646.44a67.08 67.08 0 0 0-67.08-67.08H190.16a67.08 67.08 0 0 0-67.08 67.08z"
                fill="#FFFFFF" p-id="23018"></path>
              <path
                d="M465.04 855.76H163.08A75.2 75.2 0 0 1 88 780.64v-134.2a75.2 75.2 0 0 1 75.08-75.08h301.92A75.2 75.2 0 0 1 540 642.84l71.28 64.8a8 8 0 0 1 0 12L540 784.28a75.2 75.2 0 0 1-74.96 71.48z m-301.92-268.4A59.16 59.16 0 0 0 104 646.44v134.2a59.16 59.16 0 0 0 59.08 59.08h301.92A59.16 59.16 0 0 0 524 780.64a8 8 0 0 1 2.6-5.92l67.28-61.16-67.28-61.16a8 8 0 0 1-2.6-5.92 59.16 59.16 0 0 0-59.08-59.08z"
                fill="#2FB1EA" p-id="23019"></path>
              <path d="M478.48 686.72l-315.36 0 0-40.24 315.36 0 0 40.24Z" fill="#FF8888" p-id="23020"></path>
              <path d="M478.48 780.64l-315.36 0 0-40.24 315.36 0 0 40.24Z" fill="#FF8888" p-id="23021"></path>
            </svg>
          </i>
            智能技术客服
          </el-menu-item>
          <el-menu-item index="/Friendslink"><i class="fa">
            <svg style="width: 18px;height: 22px" t="1685065802223" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="21756" width="200" height="200">
              <path
                d="M10.666667 10.666667m213.333333 0l576 0q213.333333 0 213.333333 213.333333l0 576q0 213.333333-213.333333 213.333333l-576 0q-213.333333 0-213.333333-213.333333l0-576q0-213.333333 213.333333-213.333333Z"
                fill="#F3F8FF" p-id="21757"></path>
              <path
                d="M815.466667 249.066667a153.216 153.216 0 0 0-107.008-43.797334h-1.002667c-39.893333 0-78.890667 15.893333-106.986667 43.690667l-114.986666 113.216a31.616 31.616 0 0 0-0.106667 45.290667 32.874667 32.874667 0 0 0 45.994667 0l115.093333-113.194667a87.104 87.104 0 0 1 61.397333-25.002667c23.210667 0 45.013333 8.896 61.397334 25.002667a84.117333 84.117333 0 0 1 25.408 60.394667 84.117333 84.117333 0 0 1-25.386667 60.394666l-136.32 134.314667a87.104 87.104 0 0 1-61.397333 24.981333 87.104 87.104 0 0 1-61.397334-24.981333 32.341333 32.341333 0 0 0-23.104-9.408c-17.792 0-32.384 14.293333-32.490666 32 0 8.490667 3.413333 16.597333 9.493333 22.613333a153.216 153.216 0 0 0 107.008 43.776h0.896c39.893333 0 78.890667-15.893333 107.008-43.690666l136.384-134.186667a148.266667 148.266667 0 0 0 44.501333-105.706667 148.586667 148.586667 0 0 0-44.394666-105.706666z"
                fill="#DAE9FF" p-id="21758"></path>
              <path
                d="M545.856 659.072c-8.597333 0-16.896 3.413333-22.997333 9.386667l-114.986667 113.216a87.104 87.104 0 0 1-61.397333 25.002666 87.445333 87.445333 0 0 1-61.418667-24.917333 84.629333 84.629333 0 0 1 0-120.789333l136.405333-134.293334a87.104 87.104 0 0 1 61.397334-25.002666c23.210667 0 45.013333 8.896 61.397333 24.896 6.101333 6.101333 14.293333 9.386667 23.104 9.386666 8.597333 0 16.810667-3.392 22.912-9.386666a31.616 31.616 0 0 0 0.106667-45.290667 153.216 153.216 0 0 0-107.008-43.818667h-0.896c-39.893333 0-78.912 15.914667-107.008 43.712l-136.490667 134.4a147.114667 147.114667 0 0 0-44.501333 105.685334c0 40 15.786667 77.504 44.373333 105.6a153.216 153.216 0 0 0 107.008 43.818666h0.917333c39.893333 0 78.890667-15.914667 106.986667-43.712l115.306667-113.28a31.701333 31.701333 0 0 0-0.106667-45.312 33.194667 33.194667 0 0 0-23.104-9.301333z"
                fill="#FFD6C2" p-id="21759"></path>
              <path
                d="M792.362667 214.464A153.216 153.216 0 0 0 685.376 170.666667h-1.002667c-39.893333 0-78.912 15.893333-107.008 43.690666l-114.986666 113.216a31.616 31.616 0 0 0-0.106667 45.290667 32.874667 32.874667 0 0 0 45.994667 0l115.2-113.194667A87.104 87.104 0 0 1 684.864 234.666667c23.210667 0 45.013333 8.896 61.397333 25.002666a84.117333 84.117333 0 0 1 25.386667 60.394667 84.117333 84.117333 0 0 1-25.386667 60.394667l-136.405333 134.208a87.104 87.104 0 0 1-61.397333 25.002666 87.104 87.104 0 0 1-61.397334-25.002666 32.341333 32.341333 0 0 0-23.104-9.386667c-17.792 0-32.384 14.293333-32.490666 32 0 8.490667 3.413333 16.576 9.493333 22.592a153.216 153.216 0 0 0 107.008 43.797333h0.896c39.893333 0 78.912-15.893333 107.008-43.712l136.384-134.186666a148.266667 148.266667 0 0 0 44.522667-105.706667 148.352 148.352 0 0 0-44.416-105.6z"
                fill="#3889FF" p-id="21760"></path>
              <path
                d="M522.773333 624.362667c-8.597333 0-16.896 3.413333-22.997333 9.386666L384.64 747.093333a87.104 87.104 0 0 1-61.397333 25.002667 87.445333 87.445333 0 0 1-61.397334-24.917333 84.629333 84.629333 0 0 1 0-120.789334l136.405334-134.186666a87.104 87.104 0 0 1 61.397333-25.024c23.189333 0 45.013333 8.917333 61.397333 24.917333 6.101333 6.101333 14.293333 9.386667 23.104 9.386667 8.597333 0 16.789333-3.413333 22.890667-9.386667a31.616 31.616 0 0 0 0.106667-45.290667 153.216 153.216 0 0 0-107.008-43.818666h-0.896c-39.893333 0-78.890667 15.893333-107.008 43.712l-136.384 134.293333a147.114667 147.114667 0 0 0-44.501334 105.685333c0 40.021333 15.786667 77.504 44.394667 105.6a153.216 153.216 0 0 0 107.008 43.818667h0.896c39.893333 0 78.890667-15.914667 106.986667-43.712l115.2-113.194667a31.701333 31.701333 0 0 0-0.085334-45.290666 32.554667 32.554667 0 0 0-22.997333-9.514667z"
                fill="#FB560A" p-id="21761"></path>
            </svg>
          </i>
            友链
          </el-menu-item>
          <el-submenu index="/About">
            <template slot="title"><i class="fa"></i>
              <svg style="width: 18px;height: 22px" t="1691287908327" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="2307" width="32" height="32">
                <path
                  d="M512 896a384 384 0 1 1 384-384 384 384 0 0 1-384 384z m0-682.666667a298.666667 298.666667 0 1 0 298.666667 298.666667 298.666667 298.666667 0 0 0-298.666667-298.666667z"
                  fill="#FC455D" p-id="2308"></path>
                <path
                  d="M511.975006 681.112994m-30.169889 30.169889a42.666667 42.666667 0 1 0 60.339779-60.339779 42.666667 42.666667 0 1 0-60.339779 60.339779Z"
                  fill="#FF9B57" p-id="2309"></path>
                <path
                  d="M512 608a42.666667 42.666667 0 0 1-42.666667-42.666667v-234.666666a42.666667 42.666667 0 0 1 85.333334 0v234.666666a42.666667 42.666667 0 0 1-42.666667 42.666667z"
                  fill="#FD8F9E" p-id="2310"></path>
              </svg>
              关于本站
            </template>
            <el-menu-item index="/AboutWebsite">
              <a style="text-decoration: none;color: #71777c;" href="javascript:;">
                <el-dropdown-item><i class="fa fa-fw fa-laptop"></i>关于本站</el-dropdown-item>
              </a>
            </el-menu-item>
            <el-menu-item>
              <a style="text-decoration: none;color: #71777c;" href="http://zlwwebsite.cn:5408/" target="_blank">
                <el-dropdown-item><i class="fa fa-fw fa-gear"></i>后台管理</el-dropdown-item>
              </a></el-menu-item>
          </el-submenu>
          <el-menu-item v-show="!haslogin" @click="logoinFun()"><i class="fa">
            <svg style="width: 46px;height: 46px" t="1685065956056" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="25716" width="200" height="200">
              <path
                d="M514.5 894.3c-50 0-98.4-9.8-144.1-29.1-44.1-18.6-83.7-45.3-117.7-79.3s-60.7-73.6-79.3-117.7c-19.3-45.6-29.1-94.1-29.1-144.1s9.8-98.4 29.1-144.1c18.6-44.1 45.3-83.7 79.3-117.7s73.6-60.7 117.7-79.3c45.6-19.3 94.1-29.1 144.1-29.1s98.4 9.8 144.1 29.1c44.1 18.6 83.7 45.3 117.7 79.3S837 335.9 855.6 380c19.3 45.6 29.1 94.1 29.1 144.1s-9.8 98.4-29.1 144.1c-18.6 44.1-45.3 83.7-79.3 117.7s-73.6 60.7-117.7 79.3c-45.6 19.3-94.1 29.1-144.1 29.1z m0-696.5c-179.9 0-326.3 146.4-326.3 326.3s146.4 326.3 326.3 326.3S840.8 704 840.8 524.1c0.1-180-146.3-326.3-326.3-326.3z"
                p-id="25717" fill="#1296db"></path>
              <path
                d="M512.3 960.9c-60.5 0-119.1-11.8-174.4-35.2-53.3-22.6-101.2-54.9-142.4-96-41.1-41.1-73.4-89-96-142.4-23.4-55.2-35.2-113.9-35.2-174.4s11.8-119.1 35.2-174.4c22.6-53.3 54.9-101.2 96-142.4 41.1-41.1 89-73.4 142.4-96C393.2 76.9 451.8 65 512.3 65s119.1 11.8 174.4 35.2c53.3 22.6 101.2 54.9 142.4 96 41.1 41.1 73.4 89 96 142.4 23.4 55.2 35.2 113.9 35.2 174.4s-11.8 119.1-35.2 174.4c-22.6 53.3-54.9 101.2-96 142.4-41.1 41.1-89 73.4-142.4 96-55.3 23.2-114 35.1-174.4 35.1z m0-852.1c-222.8 0-404.1 181.3-404.1 404.1S289.5 917 512.3 917s404.1-181.3 404.1-404.1-181.3-404.1-404.1-404.1z"
                p-id="25718" fill="#1296db"></path>
              <path
                d="M259.5 430.4v-9.3c0-1.8 1.4-3.2 3.2-3.2h84.9c1.8 0 3.2 1.4 3.2 3.2v11.8c0 0.6-0.2 1.2-0.5 1.7-20.3 34.3-51.4 63.2-93.2 86.9-1.5 0.9-3.5 0.3-4.4-1.2-2-3.4-4.1-6.9-6.3-10.5-1-1.6-0.4-3.7 1.2-4.5 13.2-6.9 24.3-13.7 33.2-20.2 1.6-1.2 1.8-3.4 0.4-4.8-8.1-8.3-16.4-16.5-24.8-24.6-1.3-1.2-1.3-3.3-0.1-4.6l6.4-6.4c1.2-1.2 3.2-1.3 4.4-0.1 9.8 8.9 19 17.5 27.4 25.6 1.2 1.2 3.1 1.2 4.4 0.1 10.4-9.4 19.5-20 27.3-31.8 1.4-2.1-0.1-5-2.7-5h-61c-1.5 0.1-3-1.3-3-3.1z m-6.9 177.1h66c2.9 0 4.3-3.6 2.2-5.5-4.3-4.1-9.6-8.9-15.9-14.6-1.4-1.2-1.4-3.4-0.1-4.7l6.6-6.6c1.2-1.2 3-1.3 4.3-0.2 7.8 6.5 15.6 13.3 23.5 20.5 1.4 1.3 1.4 3.5 0 4.7l-0.9 0.8c-2.1 2-0.7 5.6 2.2 5.6H380c2.9 0 4.3-3.5 2.3-5.5-1.3-1.3-1.2-3.4 0.1-4.6 8-7.4 15.2-14.6 21.8-21.8 1.2-1.3 3.1-1.4 4.4-0.3l9 7.3c1.5 1.2 1.6 3.4 0.2 4.8-4.8 4.7-9.9 9.5-15.4 14.5-2.2 2-0.8 5.6 2.2 5.6h67.3c1.8 0 3.2 1.4 3.2 3.2v9.3c0 1.8-1.4 3.2-3.2 3.2H252.6c-1.8 0-3.2-1.4-3.2-3.2v-9.3c0-1.8 1.4-3.2 3.2-3.2z m35.7-98h145.6c1.8 0 3.2 1.4 3.2 3.2v64.6c0 1.8-1.4 3.2-3.2 3.2h-11.1c-1.8 0-3.2-1.4-3.2-3.2v-1.9c0-1.8-1.4-3.2-3.2-3.2H305.9c-1.8 0-3.2 1.4-3.2 3.2v1.9c0 1.8-1.4 3.2-3.2 3.2h-11.1c-1.8 0-3.2-1.4-3.2-3.2v-64.6c-0.1-1.8 1.4-3.2 3.1-3.2z m128.1 15.2H305.9c-1.8 0-3.2 1.4-3.2 3.2v25.9c0 1.8 1.4 3.2 3.2 3.2h110.5c1.8 0 3.2-1.4 3.2-3.2v-25.9c0-1.8-1.5-3.2-3.2-3.2z m-91.9-50.5h71.8c1.8 0 3.2 1.4 3.2 3.2v8.8c0 1.8-1.4 3.2-3.2 3.2h-71.8c-1.8 0-3.2-1.4-3.2-3.2v-8.8c0-1.8 1.5-3.2 3.2-3.2z m56.3-65.4c2.8 7.2 5.8 14 9.1 20.3 0.8 1.6 2.8 2.2 4.4 1.4 14.6-8.1 27.6-15.9 38.9-23.5 1.4-0.9 3.3-0.6 4.3 0.7l7.2 9.3c1.2 1.5 0.8 3.7-0.9 4.7-12.6 7.5-26.1 15-40.5 22.7-1.7 0.9-2.2 3.1-1.1 4.7 3.1 4.3 6.3 8.3 9.8 12 1 1.1 2.6 1.3 3.9 0.6 14.4-8 27.8-16.1 40.3-24.4 1.4-0.9 3.3-0.6 4.3 0.7l7.5 9.6c1.2 1.5 0.8 3.7-0.9 4.7-10.8 6.5-22.7 13.3-35.7 20.4-2.1 1.1-2.3 4-0.3 5.4 12.6 9 26.9 15.3 42.9 19 2.2 0.5 3.2 3.1 1.9 4.9-2.9 4.2-5.8 8.4-8.5 12.6-0.8 1.3-2.4 1.8-3.8 1.3-46.7-16.9-79.7-50.5-99.1-100.9-0.6-1.6 0.2-3.5 1.8-4.1l10.2-4.1c1.8-0.6 3.7 0.3 4.3 2zM556.4 589.4c28.2-8.8 58.6-19.2 91.1-31.1 1.9-0.7 3.9 0.5 4.3 2.4 0.8 4 1.5 7.7 2.2 11 0.3 1.6-0.6 3.1-2.1 3.7-28.8 10-58.4 20.5-88.8 31.5-1.6 0.6-3.4-0.2-4.1-1.8l-4.7-11.5c-0.6-1.7 0.3-3.7 2.1-4.2z m196.5-68l9 10.2c1.3 1.5 1 3.7-0.6 4.8-11.5 7.5-25.4 16.2-41.5 26-2 1.2-2.1 4-0.2 5.3 16.2 11.7 35.9 20.5 58.9 26.2 2.2 0.5 3.1 3.1 1.8 4.9-3.1 4.5-6 8.8-8.6 13-0.8 1.2-2.3 1.8-3.7 1.4-36.8-11.6-64.8-30.3-84.1-56-1.8-2.5-5.8-1.1-5.8 1.9V599c0 18.6-9.5 27.9-28.6 27.9-8.4 0-18.3-0.1-29.6-0.4-1.5 0-2.8-1.2-3.1-2.7-0.6-3.9-1.4-8.3-2.1-13.1-0.3-2.1 1.4-3.9 3.5-3.7 9.4 1 17.9 1.5 25.6 1.6 10.9 0 16.4-4.9 16.4-14.8v-79.4c0-1.8-1.4-3.2-3.2-3.2h-97.4c-1.8 0-3.2-1.4-3.2-3.2v-9c0-1.8 1.4-3.2 3.2-3.2h165.6c1.8 0 3.2-1.4 3.2-3.2v-18.3c0-1.8-1.4-3.2-3.2-3.2H588.6c-1.8 0-3.2-1.4-3.2-3.2v-8.3c0-1.8 1.4-3.2 3.2-3.2h136.6c1.8 0 3.2-1.4 3.2-3.2v-18c0-1.8-1.4-3.2-3.2-3.2h-141c-1.8 0-3.2-1.4-3.2-3.2v-9c0-1.8 1.4-3.2 3.2-3.2h158.2c1.8 0 3.2 1.4 3.2 3.2v72.9c0 1.8 1.4 3.2 3.2 3.2h29.3c1.8 0 3.2 1.4 3.2 3.2v9c0 1.8-1.4 3.2-3.2 3.2h-96.9c-1.8 0-3.2 1.4-3.2 3.2v1.4c0 0.5 0.1 0.9 0.3 1.4 5.9 12.7 13.3 24 22.3 33.8 1.1 1.1 2.8 1.3 4.1 0.5 16-10.4 30.6-20.6 43.8-30.6 1.4-1.1 3.3-0.9 4.4 0.4zM587.6 519c13.1 8 26.3 16.5 39.8 25.7 1.5 1 1.9 3.1 0.8 4.6l-7.4 10c-1.1 1.4-3.1 1.7-4.5 0.6-12.3-9.3-25.2-18.3-38.7-27-1.6-1-1.9-3.2-0.8-4.7l6.7-8.4c0.9-1.3 2.7-1.6 4.1-0.8z"
                p-id="25719" fill="#1296db"></path>
            </svg>
          </i></el-menu-item>
          <el-submenu v-show="haslogin">
            <template slot="title"><i class="fa">
              <svg style="width: 22px;height: 18px" t="1685066494935" class="icon" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29331" width="200" height="200">
                <path
                  d="M891.5503 979.840145v-98.608264a289.00429 289.00429 0 0 0-289.00429-289.00429H421.282519a289.00429 289.00429 0 0 0-289.00429 289.00429v98.608264a43.928652 43.928652 0 0 0 43.928653 43.928652h671.530368a43.928652 43.928652 0 0 0 43.81305-43.928652z"
                  fill="#FED150" p-id="29332"></path>
                <path
                  d="M847.73725 968.511176H176.206882A43.928652 43.928652 0 0 1 132.278229 924.813728v55.25762a43.928652 43.928652 0 0 0 43.928653 43.928652h671.530368a43.928652 43.928652 0 0 0 43.81305-43.928652V924.813728a43.928652 43.928652 0 0 1-43.81305 43.697448z"
                  fill="#FED150" opacity=".5" p-id="29333"></path>
                <path
                  d="M511.914265 0a271.548431 271.548431 0 0 0-77.45315 11.560172 179.991872 179.991872 0 0 0-4.73967 79.880785C450.645355 216.984421 535.959422 248.081282 566.940681 242.763604s49.477534-20.923911 46.240687-43.235042-11.560172-26.703996-11.560172-26.703997a37.570558 37.570558 0 1 1-73.985098 11.560172s-9.941748-50.402348 48.783924-59.766087 76.990743 50.286746 78.955972 62.193723 2.196433 85.776473-82.539625 99.301874-169.12531-62.540528-188.777602-186.118763a214.90359 214.90359 0 0 1 0-68.320614A273.398058 273.398058 0 1 0 511.914265 0z"
                  fill="#EB3D72" p-id="29334"></path>
                <path
                  d="M384.28997 31.67487l-2.427636 1.271619c0 3.699255 0.578009 7.39851 0.924814 11.560172 0.462407-4.624069 0.809212-8.78573 1.502822-12.831791zM511.914265 501.711447A273.282457 273.282457 0 0 1 239.556622 250.971325c-0.69361 7.39851-1.040415 14.912621-1.040416 22.426733a273.51366 273.51366 0 1 0 546.911719 0c0-7.514112 0-15.028223-1.040416-22.542334a273.398058 273.398058 0 0 1-272.473244 250.855723z"
                  fill="#EB3D72" p-id="29335"></path>
              </svg>
            </i>{{ userInfo.nickName }}
            </template>
            <el-menu-item index="/UserInfo">个人中心</el-menu-item>
            <el-menu-item @click="handleMyLikes">我的点赞</el-menu-item>
            <el-menu-item @click="handleUpdatepwd">修改密码</el-menu-item>
            <el-menu-item @click="userlogout">退出登录</el-menu-item>
          </el-submenu>
          <el-badge :value="count" class="item" style="margin-top: 10px" v-show="haslogin">
            <el-button @click="handleNotice" icon="el-icon-bell"></el-button>
          </el-badge>
          <!--   消息通知抽屉   -->
          <el-drawer
            title="消息"
            :visible.sync="drawer2"
            :direction="direction2"
            :before-close="handleClose2">
            <hr>
            <el-empty v-show="!loading2 && (noticeList===null||noticeList.length===0)"
                      description="暂无消息"></el-empty>
            <img v-if="loading2" style="width: 100%" src="../assets/loading.gif">


            <el-row v-else>
              <el-col :span="24" v-for="(item,index) in noticeList" :key="'notice'+index"
                      style="margin-bottom: 25px;border-radius: 5px">
                <el-card :body-style="{ padding: '0px' }">
                  <div slot="header" class="clearfix">
                    <span v-if="item.type==0"
                          :class="item.isRead==0?'card-title':'card-title-already-read'">收到一条评论回复</span>
                    <span v-else-if="item.type==1"
                          :class="item.isRead==0?'card-title':'card-title-already-read'">审核通知</span>
                    <span v-else-if="item.type==2"
                          :class="item.isRead==0?'card-title':'card-title-already-read'">有新文章发布</span>
                    <span v-else :class="item.isRead==0?'card-title':'card-title-already-read'">系统通知</span>
                    <div style="float: right; ">
                      <span style="padding: 3px 0;color: #8c939d" type="text">{{ formatDate(item.createTime) }}</span>
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(item.id)"
                      >
                      </el-button>
                    </div>
                  </div>
                  <el-row style="background-color: rgb(248,248,248)">
                    <el-col :span="5" style="overflow: hidden">
                      <img
                        src="@/assets/notice.png" alt="" class="notice-img">
                    </el-col>
                    <el-col :span="19">
                      <div style="padding: 14px;">
                        <div class="card-content bottom clearfix">
                          <p>{{ item.content }}</p>
                          <p v-if="item.type!=3" style="margin-top: 10px" @click="toDetail2(item.articleId,item.id)">
                            点击跳转文章详情>></p>
                          <p v-else style="margin-top: 10px" @click="readNotice(item.id)">
                            点击标记已阅>></p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-drawer>

          <!--   抽屉   -->
          <el-drawer
            title="❤点赞过的文章"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose">
            <hr>
            <el-empty v-show="!loading && (myLikeList===null||myLikeList.length===0)" description="暂无数据"></el-empty>
            <img v-if="loading" style="width: 100%" src="../assets/loading.gif">


            <el-row v-else>
              <el-col :span="24" v-for="(item,index) in myLikeList" :key="'article'+index"
                      style="margin-bottom: 25px;border-radius: 5px">
                <el-card :body-style="{ padding: '0px' }">
                  <el-row :gutter="28">
                    <el-col :span="10" style="overflow: hidden">
                      <img @error="setDefaultImage" :title="item.title" @click="toDetail(item.id)"
                           :src="item.thumbnail" alt=""
                           class="article-img">
                    </el-col>
                    <el-col :span="14">
                      <div style="padding: 14px;">
                        <a class="article-title" :href="'#/DetailArticle?aid='+item.id"
                           style="font-size: 18px;font-weight: bold">{{ item.title }}</a>
                        <div class="bottom clearfix">
                          <p>{{ item.summary }}</p>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-drawer>
          <el-dialog
            title="修改密码"
            :visible.sync="open"
            center>
            <hr>
            <el-form :label-position="'right'" label-width="80px">
              <el-form-item label="新密码">
                <el-input v-model="newPassword" type="password" placeholder="密码:6-12位英文、数字、下划线"></el-input>
                <el-alert
                  style="padding: 0 16px"
                  v-show="newPasswordErr"
                  title="密码格式错误"
                  type="error"
                  show-icon :closable="false">
                </el-alert>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="rePassword" type="password" placeholder="与新密码一致"
                          @keyup.enter.native="submitForm"></el-input>
                <el-alert
                  style="padding: 0 16px"
                  v-show="rePasswordErr"
                  title="重复密码有误"
                  type="error"
                  show-icon :closable="false">
                </el-alert>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
          </el-dialog>
        </el-menu>
        <!--   移动端导航    -->

      </div>
    </div>
  </div>
</template>
<script>
import {getUserInfo, logout, updatePassword} from '../api/user'
import {getToken, removeToken} from '../utils/auth'
import {getCategoryList} from '../api/category'
import {Typeit} from '../utils/plug.js'
import {getSentence} from "../api/sentence";
import {getMyLikes, search} from "../api/article";
import {formatDate, setDefaultImage} from "../utils/common";
import {delNotice, getNotices, nonReadCount, read} from "../api/notice";

export default {
  data() { //选项 / 数据
    return {
      count: 0,
      noticeList: [],
      drawer2: false,
      direction2: 'rtl',
      loading: false,
      loading2: false,
      drawer: false,
      direction: 'rtl',
      myLikeList: [],
      keyword: "",
      searchList: [],
      rePasswordErr: false,//重复密码错误
      newPasswordErr: false,//新密码错误
      newPassword: '',
      rePassword: '',
      open: false,
      openSearch: false,
      navColor: 'rgb(237, 240, 245,0)',
      navTop: 0,
      prevScrollpos: 0,
      userInfo: '', //用户信息
      haslogin: false, //是否已登录
      classListObj: '', //分类
      activeIndex: '/', //当前选择的路由模块
      state: '', //icon点击状态
      pMenu: true, //手机端菜单打开
      // path:'',//当前打开页面的路径
      input: '', //input输入内容
      headBg: 'url(static/img/headbg05.jpg)', //头部背景图
      headTou: '', //头像
      projectList: '' //项目列表
    }
  },
  methods: {
    handleDelete(id) {
      delNotice(id).then(() => {
        this.getNoticeList()
        this.$message.success('删除成功')
      }).catch(() => {
        {
          this.$message.error('删除成功')
        }
      })
    },
    formatDate,
    setDefaultImage,
    readNotice(noticeId) {
      //读消息
      read(noticeId).then(() => {
        this.getNoticeList()
        //刷新未读消息数
        nonReadCount().then((res) => {
          this.count = res
        })
      })
    },
    toDetail2(articleId, noticeId) {
      this.readNotice(noticeId)
      this.drawer2 = false
      // 路由跳转新标签页
      const href = this.$router.resolve({
        path: '/DetailArticle?aid=' + articleId,
      }).href;
      window.open(href, '_self')
    },
    toDetail(id) {
      // 路由跳转新标签页
      const href = this.$router.resolve({
        path: '/DetailArticle?aid=' + id,
      }).href;
      window.open(href, '_self')
    },
    handleClose2() {
      this.drawer2 = false
    },
    handleClose() {
      this.drawer = false
    },
    getNoticeList() {
      // 获取通知列表
      getNotices().then((res) => {
        this.noticeList = res
        this.loading2 = false
      })
    },
    handleNotice() {
      this.drawer2 = true
      this.loading2 = true
      this.getNoticeList()
    },
    handleMyLikes() {
      this.drawer = true
      this.loading = true
      // 获取我的喜欢列表
      getMyLikes().then((res) => {
        this.myLikeList = res
        this.loading = false
      })
    },
    getSearchResult(e) {
      search(this.keyword).then((res) => {
        this.searchList = res
        this.searchList.forEach((item) => {
          item.title = this.showData(item.title.toLowerCase()).toLowerCase()
          item.summary = this.showData(item.summary.toLowerCase()).toLowerCase()
        })
      })
    },
    showData(val) {
      val = val + '';
      if (val.indexOf(this.keyword) !== -1 && this.keyword !== '') {
        return val.replace(new RegExp(this.keyword, 'gi'), '<font color="#ff7242">' + this.keyword + '</font>');
        // return val.replace( /this.keyword/gi , '<font color="#409EFF">'+this.keyword+'</font>');
      } else {
        return val
      }
    },
    handleUpdatepwd() {
      this.reset()
      this.open = true
    },
    handleSearch() {
      // this.resetSearch()
      this.openSearch = true
    },
    resetSearch() {
      this.keyword = ""
      this.searchList = []
    },
    reset() {
      this.newPassword = '';
      this.rePassword = '';
      this.rePasswordErr = false;
      this.newPasswordErr = false;
    },
    cancel() {
      this.open = false
      this.$message.info("取消修改")
    },
    submitForm() {
      const preg = /^(\w){6,12}$/;
      if (this.newPassword && preg.test(this.newPassword)) {
        this.newPasswordErr = false;
      } else {
        this.newPasswordErr = true;
      }
      if (this.newPassword === this.rePassword) {
        this.rePasswordErr = false;
      } else {
        this.rePasswordErr = true;
      }
      if (!this.newPasswordErr && !this.rePasswordErr) {
        updatePassword(this.newPassword, this.rePassword).then((res) => {
          this.open = false
          this.$message.success("修改密码成功，下次登录生效！")
        }).catch((res) => {
          let errorMsg = res.toString()
          if (errorMsg.startsWith("Error:"))
            this.$message.error(errorMsg)
        })
      }
    },
    handleScroll() {
      const currentScrollPos = window.pageYOffset;
      if (this.prevScrollpos > currentScrollPos) {
        // 页面向上滚动，显示导航栏
        this.navTop = '0';
        this.navColor = 'rgb(255,255,255,0.6)'
        // this.navColor = 'rgb(67,40,69,0.3)'
        if (document.documentElement.scrollTop === 0) {
          this.navColor = 'rgb(255,255,255,0)'
        }
      } else {
        // 页面向下滚动，隐藏导航栏
        this.navTop = '-80px'; // 根据实际情况调整隐藏的高度
      }
      this.prevScrollpos = currentScrollPos;
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll);
    },
    //事件处理器
    handleOpen(key, keyPath) { //分组菜单打开
      // console.log(key, keyPath);
    },
    searchChangeFun(e) { //input change 事件
      // console.log(e)
      if (this.input == '') {
        this.$store.state.keywords = '';
        this.$router.push({path: '/'});
      }
    },
    getCategoryList() {
      getCategoryList().then((response) => {
        this.classListObj = response
      })
    },
    handleSelect(key, keyPath) { //pc菜单选择
      //    console.log(key, keyPath);
    },
    logoinFun: function () { //用户登录和注册跳转
      // console.log(msg);
      localStorage.setItem('logUrl', this.$route.fullPath);
      // console.log(666,this.$router.currentRoute.fullPath);
      // if (msg == 0) {
      //   this.$router.push({
      //     path: '/Login?login=0'
      //   });
      // } else {
      //   this.$router.push({
      //     path: '/Login?login=1'
      //   });
      // }
      this.$router.push({
        path: '/Login'
      });
    },
    // 用户退出登录
    userlogout: function () {
      var that = this;
      this.$confirm('是否确认退出?', '退出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(that.$route.path);

        logout().then((response) => {
          removeToken()
          localStorage.removeItem('userInfo');
          that.haslogin = false;
          window.location.reload();
          that.$message({
            type: 'success',
            message: '退出成功!'
          });
          if (that.$route.path == '/UserInfo') {
            that.$router.push({
              path: '/'
            });
          }
        })
      }).catch(() => {
        //
      });

    },
    routeChange: function () {
      var that = this;
      that.pMenu = true
      this.activeIndex = this.$route.path == '/' ? '/Home' : this.$route.path;
      // if (localStorage.getItem('userInfo')) { //存储用户信息
      // 	that.haslogin = true;
      // 	that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
      // 	// console.log(that.userInfo);
      // } else {
      // 	that.haslogin = false;
      // }
      if (localStorage.getItem('userInfo')) {
        that.haslogin = true;
        that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
        that.userId = that.userInfo.id;
        getUserInfo(that.userId).then((response) => {
          that.userInfo = response;
        })
      } else {
        that.haslogin = false;
      }
      //获取分类
      this.getCategoryList()

      if ((this.$route.name == "Share" || this.$route.name == "Home") && this.$store.state.keywords) {
        this.input = this.$store.state.keywords;
      } else {
        this.input = '';
        this.$store.state.keywords = '';
      }
    }
  },
  components: {},
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'routeChange'
  },
  created() { //生命周期函数
    //判断当前页面是否被隐藏
    var that = this;
    var hiddenProperty = 'hidden' in document ? 'hidden' :
      'webkitHidden' in document ? 'webkitHidden' :
        'mozHidden' in document ? 'mozHidden' :
          null;
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    var onVisibilityChange = function () {
      if (!document[hiddenProperty]) { //被隐藏
        if (that.$route.path != '/DetailShare') {
          if (localStorage.getItem('userInfo')) {
            that.haslogin = true;
          } else {
            that.haslogin = false;
          }
        }
      }
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
    // console.log();
    this.routeChange();


  },

  mounted() {
    //查询未读消息数
    if (getToken()){
      nonReadCount().then((res) => {
        this.count = res
      })
    }
    window.addEventListener('scroll', this.handleScroll);
    let sentence = ''
    let from = ''
    getSentence().then((res) => {
      sentence = res.content
      from = res.source
      //页面元素加载完成
      var that = this;
      var timer = setTimeout(function () {
        Typeit(that.$store.state.themeObj.user_start, "#luke", sentence, from); //打字机效果
        clearTimeout(timer);
      }, 500);
    })
  }
}
</script>

<style>
.card-content {
  color: #999999FF;
}

.card-title-already-read {
  font-size: larger;
  font-weight: bolder
}

.card-title {
  position: relative;
  font-size: larger;
  font-weight: bolder
}

.card-title::after {
  content: '';
  position: absolute;
  top: 4px;
  right: -15px;
  width: 10px;
  height: 10px;
  background-color: rgb(253, 78, 1);
  border-radius: 50%;
}

.article-title:hover {
  color: rgb(73, 177, 245);
}

.article-img {
  max-height: 100px;
  height: inherit;
  width: 100%;
  transition: transform 0.5s ease;
}

.notice-img {
  max-height: 80px;
  height: inherit;
  width: 100%;
}

.article-img:hover {
  transform: scale(1.2);
}

.search-result-list {
  overflow-y: auto;
  max-height: 10.5rem;
}

.local-search__hit-item {
  position: relative;
  padding-left: 1.2rem;
  line-height: 1.7;
}

.local-search__hit-item:hover:before {
  border-color: #ff7242;
}

.local-search__hit-item:before {
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 0.15rem solid #49b1f5;
  border-radius: 0.5em;
  background: transparent;
  content: '';
  line-height: 0.5em;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.search-result-title {
  font-size: 14px;
  display: block;
  color: #4c4948;
  font-weight: 600;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;
  transition: all 0.2s;
  overflow-wrap: break-word;
  background-color: transparent;
}

.search-result-title:hover {
  color: #49b1f5;
}

.local-search__hit-item .search-result {
  margin: 0 0 0.4rem;
  word-break: break-all;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.el-dialog {
  width: 35% !important;
}

.el-dialog__title {
  float: left;
  color: #49b1f5;
}

hr {
  position: relative;
  margin: 1rem auto;
  border: 2px dashed #a4d8fa;
  width: calc(100% - 4px);
  box-sizing: content-box;
  height: 0;
  overflow: visible;

}

hr:hover:before {
  left: calc(95% - 20px);
}

hr:before {
  position: absolute;
  top: -15px;
  left: 5%;
  z-index: 1;
  color: #80c8f8;
  content: url("../assets/car.svg");
  font-size: 20px;
  line-height: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.local-search-box input {
  padding: 0.25rem 0.7rem;
  width: 100%;
  outline: none;
  border: 2px solid #49b1f5;
  border-radius: 2rem;
  background: #f6f8fa;
  color: #4c4948;
  -webkit-appearance: none;
}

.local-search-box {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.el-dialog--small {
  width: 20% !important;
}

.el-menu-item {
  /*color: white !important;*/
}

.el-submenu .el-submenu__title {
  /*color: white !important;*/
}

.el-submenu .el-menu-item {
  /*color: #48576A !important;*/
}

.head {
  /*background: url("../assets/background.jpg") no-repeat center center;*/
  /*background-size: 100% 100%;*/
}

.size-name {
  border-bottom: 0 !important;
  text-shadow: 4px 4px 6px rgba(0, 0, 0) !important;
  font-weight: bold !important;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;
  /*color: rgb(103,126,150)!important;*/
  color: rgb(247, 249, 254) !important;
  font-size: 25px !important;
}

/*********头部导航栏********/

/*头部导航栏盒子*/

/*.headBack {*/
/*  width: 100%;*/
/*  background: rgba(40, 42, 44, 0.6);*/
/*  !*margin-bottom:30px;*!*/
/*  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);*/
/*  position: fixed;*/
/*  left: 0;*/
/*  top: 0;*/
/*  right: 0;*/
/*  z-index: 100;*/
/*}*/
.headBack {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 99999999 !important;
}

.headBox li.is-active {
  /*background: #48456C;*/
  background: rgba(73, 69, 107, 0.7);
}

.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: none !important;
}

.headBox .el-menu {
  background: transparent;
  border-bottom: none !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}

.el-menu-demo {
  float: right !important;
}

.headBox .el-menu-demo li.el-menu-item,
.headBox .el-menu--horizontal .el-submenu .el-submenu__title {
  height: 38px;
  line-height: 38px;
  border-bottom: none !important;
}

.headBox .el-submenu li.el-menu-item {
  height: 38px;
  line-height: 38px;
}

.headBox li .fa-wa {
  vertical-align: baseline;
}

.headBox ul li.el-menu-item,
.headBox ul li.el-menu-item.is-active,
.headBox ul li.el-menu-item:hover,
.headBox .el-submenu div.el-submenu__title,
.headBox .el-submenu__title i.el-submenu__icon-arrow {
  color: #fff;
}

.headBox .el-menu--horizontal .el-submenu > .el-menu {
  top: 38px;
  border: none;
  padding: 0;
}

.headBox > ul li.el-menu-item:hover,
.headBox > ul li.el-submenu:hover .el-submenu__title {
  background: #48456C;
  border-bottom: none;
}

.headBox > ul .el-submenu .el-menu,
.headBox > ul .el-submenu .el-menu .el-menu-item {
  background: #48456C;
}

.headBox > ul .el-submenu .el-menu .el-menu-item {
  min-width: 0;
}

.headBox > ul .el-submenu .el-menu .el-menu-item:hover {
  background: #64609E;
}

/*pc搜索框*/

.headBox .pcsearchbox {
  padding: 0;
  max-width: 170px;
  /*min-width: 30px;*/
  height: 100%;
  line-height: 38px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;
}

.headBox .pcsearchbox:hover .pcsearchinput {
  opacity: 1;
  /*transform: scaleX(1);*/
  visibility: visible;
}

.headBox .pcsearchbox i.pcsearchicon {
  color: #fff;
  padding-left: 10px;
}

.headBox .pcsearchbox .pcsearchinput {
  width: 180px;
  padding: 10px 20px 10px 20px;
  background: rgba(40, 42, 44, 0.6);
  border-radius: 0 0 2px 2px;
  position: absolute;
  right: 0;
  top: 38px;
  opacity: 0;
  visibility: hidden;
  /*transform: scaleX(0);*/
  transform-origin: right;
  transition: all 0.3s ease-out;
}

.headBox .pcsearchbox .hasSearched {
  opacity: 1;
  /*transform: scaleX(1);*/
  visibility: visible;
}

.headBox .pcsearchbox .el-input {
  width: 100%;
}

.headBox .el-input__inner {
  height: 30px;
  border: none;
  background: #fff;
  /*border: 1px solid #333;*/
  border-radius: 2px;
  padding-right: 10px;
}

.headBox .userInfo {
  height: 100%;
  line-height: 38px;
  position: absolute;
  right: 30px;
  top: 0;
  color: #fff;
}

.headBox .userInfo a {
  color: #fff;
  font-size: 13px;
  transition: all 0.2s ease-out;
}

.headBox .userInfo a:hover {
  color: #48456C;
}

.headBox .nologin {
  text-align: right;
}

.headBox .haslogin {
  text-align: right;
  position: relative;
  min-width: 80px;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;
}

.headBox .haslogin:hover ul {
  visibility: visible;
  opacity: 1;
}

.headBox .haslogin ul {
  background: rgba(40, 42, 44, 0.6);
  padding: 5px 10px;
  position: absolute;
  right: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
}

.headBox .haslogin ul li {
  border-bottom: 1px solid #48456C;
}

.headBox .haslogin ul li:last-child {
  border-bottom: 1px solid transparent;
}

/*******移动端*******/

.mobileBox {
  position: relative;
  height: 38px;
  line-height: 38px;
  color: #fff;
}

.hideMenu {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 38px;
}

.hideMenu ul.mlistmenu {
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  box-sizing: border-box;
  z-index: 999;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), 0 0 8px 0 rgba(0, 0, 0, .04);
  background: #48456C;
  color: #fff;
  border-right: none;
}

.hideMenu .el-submenu .el-menu {
  background: #64609E;
}

.hideMenu .el-menu-item,
.hideMenu .el-submenu__title {
  color: #fff;
}

.hideMenu > i {
  position: absolute;
  left: 10px;
  top: 12px;
  width: 30px;
  height: 30px;
  font-size: 16px;
  color: #fff;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;
}

.hideMenu .el-menu-item,
.el-submenu__title {
  height: 40px;
  line-height: 40px;
}

.mobileBox .searchBox {
  padding-left: 40px;
  width: 100%;
  box-sizing: border-box;
}

.mobileBox .searchBox .el-input__inner {
  display: block;
  border-radius: 2px;
  border: none;
  height: 25px;
}

.hideMenu ul.mlistmenu.pshow {
  display: block;
}

.hideMenu ul.mlistmenu .el-submenu__icon-arrow,
.mobileBox li.el-menu-item a {
  color: #fff;
}

.hideMenu > ul li.el-menu-item:hover,
.hideMenu > ul li.el-menu-item.is-active {
  background: #48576a;
}


/*头部背景图*/

.headImgBox {
  height: 400px !important;
  /*height: 100%;*/
  position: relative !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center 25% !important;
  background-repeat: no-repeat !important;
  margin-bottom: 50px !important;
}

.h-information {
  text-align: center;
  width: 70%;
  margin: auto;
  position: relative;
  top: 480px;
  padding: 40px 0;
  font-size: 16px;
  opacity: 0.98;
  background: rgba(230, 244, 249, 0);
  /*background: rgba(230, 244, 249, 0.8);*/
  border-radius: 5px;
  z-index: 1;
  animation: b 1s ease-out;
  -webkit-animation: b 1s ease-out;
}

@-webkit-keyframes b {
  0% {
    -webkit-transform: translateY(90px);
    transform: translateY(90px);
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }
  90% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes b {
  0% {
    -webkit-transform: translateY(90px);
    transform: translateY(90px);
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }
  90% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.h-information img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  object-fit: cover;
}

.h-information img:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.scene img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  object-fit: cover;
}

.scene img:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.h-information h2 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
  /*font-family: 'Sigmar One';*/
}

.h-information h2 a {
  background: linear-gradient(to right, #DF2050, #48456D);
  -webkit-background-clip: text;
  color: transparent;
}

.headImgBox .scene {
  width: 100%;
  /*height:300px;*/
  text-align: center;
  font-size: 30px;
  /*font-weight: 200;*/
  color: rgb(106, 130, 155);
  text-shadow: 0.4rem 0.4rem 0.6rem rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  top: 160px;
  font-family: 'Sigmar One', Arial;
  /*text-shadow: 0 2px 2px #47456d;*/

}

.headImgBox .scene span {
  /*transform: matrix(1, 0, 0, 1, 0, 0);*/
  /*-webkit-transform: matrix(1, 0, 0, 1, 0, 0);*/
  /*text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;*/
}

.saying:after {
  content: "|";
  font-family: Arial, sans-serif;
  font-size: 1em;
  /*line-height: 0;*/
  display: inline-block;
  vertical-align: baseline;
  /*opacity: 1;*/
  /*text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;*/
  /*animation: caret 500ms infinite;*/
}

@keyframes caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
</style>
